<template>
  <!-- 课程排行榜 -->
  <div class="chart-container" :style="position">
    <div class="chart-main">
      <h2 class="class-title">课程TOP20</h2>
        <!-- <transition name="moveup"> -->
          <div class="showbox">  
              <div class="box">
                <div v-for="(item,index) in obj" :key="index" class="class-item">
                  <span><i>{{index+1}}</i>{{item.text}}</span>
                  <span class="learn-num">
                      <svg style="width: 17px;height: 17px;">
                        <circle cx="9" cy="9" r="6" class="circle" :style="'stroke-dashoffset:'+item.stroke_dashoffset"></circle>
                      </svg>
                      {{item.num}}人已学
                  </span>
                </div>
                <div v-for="(item,index) in obj" :key="index" class="class-item">
                  <span><i>{{index+1}}</i>{{item.text}}</span>
                  <span class="learn-num">
                      <svg style="width: 17px;height: 17px;">
                        <circle cx="9" cy="9" r="6" class="circle" :style="'stroke-dashoffset:'+item.stroke_dashoffset"></circle>
                      </svg>
                      {{item.num}}人已学
                  </span>
                </div>
              </div>
          </div>
        <!-- </transition> -->
    </div>
    <i class="i_tl"></i>
      <i class="i_tr"></i>
      <i class="i_bl"></i>
      <i class="i_br"></i>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
export default {
  name:'CourseRankingList',
  props:{
    data:{
      type:String,
      default:'hhh'
    },
    boxPosition:{       
      type:Object,       
      default:()=>{}     
    }
  },
  setup(props){
    const position = `left:${props.boxPosition?.left}px;top:${props.boxPosition?.top}px;`
    // svg进度条区间  44-6  44显示为100%  6显示为0%   130-94* 123/200
    // stroke_dashoffset 计算方法   44-  44-6  *  学习人数百分比
    const obj = ref([
      {text:'来点字',num:200,all:200,stroke_dashoffset:44-((44-6)*(200/200))},
      {text:'来点字',num:123,all:200,stroke_dashoffset:44-((44-6)*(123/200))},
      {text:'来点字',num:100,all:200,stroke_dashoffset:44-((44-6)*(100/200))},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'},
      {text:'来点字',num:123,all:200,stroke_dashoffset:'94'}
    ])//假数据
    return {
      position,
      obj,
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container{
  width: 100%;
  height: 100%;
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;//默认，需通过style插入动态数据
    background-color: rgba($color: #071c55, $alpha: 0.5);
    >i{
    width: 20px;
    height: 20px;
    position: absolute;
    // display: block;
  }
  .i_tl{
    top: 0;
    left: 0;
    background: url('../../assets/images/useimages/tl.png') no-repeat left top;
  }
  .i_tr{
    top: 0;
    right: 0;
    background: url('../../assets/images/useimages/tr.png') no-repeat right 1px;
  }
  .i_bl{
    bottom: 0;
    left: 0;
    background: url('../../assets/images/useimages/bl.png') no-repeat left bottom;
  }
  .i_br{
    bottom: 0;
    right: 0;
    background: url('../../assets/images/useimages/br.png') no-repeat right bottom;
  }
}
.chart-main{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  overflow: hidden;
}
.showbox{
    height: 80%;
    overflow: hidden;
    
  }
.box{
  animation: classmoveup 10s linear infinite;
  &:hover{
      animation-play-state: paused;
  }
}
.class-title{
  color: #6db4f3;
  font-size: 18px;
  font-weight: 700;
  margin-top: 0;
}
.class-item{
  color: #6db4f3;
}
.class-item span{
    display: inline-block;
    width: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.class-item span i{
  display: inline-block;
  width: 20px;
  text-align: center;
  padding-right: 10px;
}
.class-item  .learn-num{
  color: #5b6e94;
}
.circle {
    fill: none;
    stroke: #7C83FD;
    stroke-width: 3;
    stroke-dasharray: 43;
    stroke-dashoffset:130;
    stroke-linecap: round;
    transform:rotate(-90deg);
    transform-origin: center;
    transform-box:fill-box;
    transition: all 1s;
}
</style>